<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8"/>
    <title>Webclient for protobuf</title>
    <link rel="shortcut icon" href="/image/favicon.ico" type="image/x-icon">
    <link charset="utf-8" rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link charset="utf-8" rel="stylesheet" href="/css/common.css"/>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/common.webrtc.js" async></script>
    <script type="text/javascript" src="/js/webclient.webrtc.js"></script>
    <script type="text/javascript" src="/js/cim/message.js"></script>
    <script type="text/javascript" src="/js/cim/replybody.js"></script>
    <script type="text/javascript" src="/js/cim/sentbody.js"></script>
    <script type="text/javascript" src="/js/cim/cim.web.sdk.js"></script>
</head>

<script>

    /***********************************推送配置开始**************************/

    /**  当socket连接成功回调 **/
    function onConnectFinished() {
        CIMPushManager.bind($('#account').val());
    }

    /** 当收到请求回复时候回调  **/
    function onReplyReceived(reply) {
        console.log(reply);
        if (reply.key === KEY_CLIENT_BIND && reply.code === CODE_OK) {
            hideProcess();

            $('#LoginDialog').fadeOut();

            $('#MessageDialog').fadeIn();
            $('#MessageDialog').addClass("in");
            $("#current_account").text($('#account').val());

        }

        /**
         * 链接鉴权失败
         */
        if (reply.key === KEY_HANDSHAKE && reply.code === CODE_UNAUTHORIZED) {
            hideProcess();
            showETip("鉴权失败");
        }

    }

    /** 当收到消息时候回调  **/

    function onMessageReceived(message) {
        console.log(message);
        /*
         账户在其他地方登录了
         */
        if (message.action === ACTION_999) {
            $('#MessageDialog').fadeOut();
            $('#LoginDialog').fadeIn();
            $('#LoginDialog').addClass("in");
            return;
        }

        showNotification(message.content);
        var time = new Date(message.timestamp).toLocaleString();
        $("#messageList").prepend("<div class='alert alert-info' >" + time + "</p></p>" + message.content + "</div>");
    }


    /***********************************推送配置结束**************************/


    /***********************************业务配置开始**************************/

    function doLogin() {

        if ($.trim($('#account').val()) == '') {
            return;
        }
        showProcess('正在接入请稍后......');
        /**登录成功后创建连接****/
        CIMPushManager.connect();
    }

    $(document).ready(function () {
        $('#LoginDialog').fadeIn();
        $('#LoginDialog').addClass("in");
        $('#host').val(CIM_HOST);
        $('#port').val(CIM_PORT);
        initNotification();
    });


    function initNotification() {
        //判断浏览器是否支持桌面通知
        if (window.Notification) {
            var notification = window.Notification;
            if (notification.permission == "default") {
                notification.requestPermission(function (permission) {
                });
            }
        }
    }

    function showNotification(msg) {
        var notify = new Notification("系统消息", {
            body: msg,
            icon: '/image/icon.png',
            tag: 1
        });

        notify.onshow = function () {
            setTimeout(function () {
                notify.close();
            }, 3000);
        }
    }

    /***********************************业务配置结束**************************/
</script>


<body style="width: 600px;">

<div class="modal fade" id="LoginDialog" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" style="width: 400px;margin: 64px auto;">
        <div class="modal-content">
            <div class="modal-body" style="padding:0px;">
                <div style="height:200px;text-align: center; background: #5FA0D3; color: #ffffff; border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px;">
                    <img src="/image/icon.png" style="height: 72px;width: 72px;margin-top:40px;"/>
                    <div style="margin-top: 20px; color: #ffffff;font-size: 16px;">请输入一个帐号用于登录，随后接收推送消息</div>
                </div>

                <div class="input-group"
                     style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
                    <span class="input-group-addon">账号</span>
                    <input type="text" class="form-control" id="account" maxlength="32" placeholder="帐号（数字或者英文字母）"
                           style="display: inline; width: 100%; height: 50px;"/>
                </div>


                <div class="alert alert-success" role="alert" style="margin: 0 10px;">
                    cim.web.sdk.js中设置cim服务的IP(域名)和端口
                </div>

                <div class="input-group"
                     style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
                    <span class="input-group-addon">host</span>
                    <input type="text" class="form-control" id="host" maxlength="32" readonly="readonly"
                           style="display: inline; width: 100%; height: 50px;"/>
                </div>

                <div class="input-group"
                     style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
                    <span class="input-group-addon">port</span>
                    <input type="text" class="form-control" id="port" maxlength="32" readonly="readonly"
                           style="display: inline; width: 100%; height: 50px;"/>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <a type="button" class="btn btn-success btn-lg" onclick="doLogin()"
                   style="width: 300px;">登录</a>
            </div>
        </div>
    </div>
</div>

<!-- 消息提示页面 -->
<div class="modal fade" data-backdrop="static" id="MessageDialog" tabindex="-1" role="dialog">
    <div class="alert alert-success" role="alert">
        通过<a href="/console/session/list" class="alert-link" target="_blank">控制台</a>或者<a href="/swagger-ui/index.html"
                                                                                         target="_blank"
                                                                                         class="alert-link">调用接口</a>发送消息
    </div>
    <div class="modal-dialog" style="width: 720px;margin: 30px auto;">
        <div class="modal-content">
            <div class="modal-header" style="text-align: center;">
                <span style="float: left;">消息显示面板</span>
                <span style="float: right;color: #4caf50;">当前帐号：<span id="current_account"></span></span>
            </div>
            <div class="modal-body" id="messageList" style="min-height: 600px;">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="videoDialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 640px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="doHangup()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">正在和admin视频中</h4>
            </div>
            <div class="modal-body" style="padding: 0; height: 480px">
                <video id="remoteVideo" playsinline autoplay></video>
                <video id="localVideo" playsinline autoplay muted></video>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showCallVideoDialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 300px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">admin 正在尝试和你通话 ...</h4>
            </div>
            <div class="modal-body" style="padding: 0; height: 60px">
                <button type="button" class="btn btn-danger" data-dismiss="modal" aria-label="Close"
                        style="margin: 15px"
                        onclick="handleRefuse()">拒绝
                </button>
                <button type="button" class="btn btn-success" data-dismiss="modal" aria-label="Close"
                        style="margin: 15px; float: right"
                        onclick="handleAccept()">接受
                </button>
            </div>
        </div>
    </div>
</div>

</body>
</html>